KCG HTML Editor

User Guide

KCG HTML Editor is a desktop HTML editing environment with three working views: source editing, WYSIWYG editing, and live preview. This guide covers the normal editing workflow, formatting tools, file operations, and practical troubleshooting.

Getting Started

KCG HTML Editor is designed for editing full HTML documents and reusable page content. You can work directly in markup, visually in the WYSIWYG tab, or switch to Preview to check rendering.

The source editor is the most precise view. The WYSIWYG tab is convenient for visual work, but source remains the final authority when you need exact markup control.

Best for exact code

Use the HTML Edit tab when you need to inspect or control the exact tags.

Best for quick layout

Use the WYSIWYG tab when you want to apply common formatting visually.

Quick Start

This is the shortest reliable workflow for building or editing a page in KCG HTML Editor.

  1. Open a file with File > Open, or start fresh with File > New.
  2. Choose your working mode: HTML Edit for exact markup control or WYSIWYG for visual editing.
  3. Build structure first with P, DIV, SEC, List, Table, or Form.
  4. Apply formatting with Heading, Font Family, Size, Color, bold, italic, underline, and alignment tools.
  5. Insert content details such as Link, Img, Video, BR, and HR.
  6. Switch to Preview to verify the rendered result.
  7. Run cleanup commands like Tidy HTML, Beautify CSS, or Tidy All if the source needs normalization.
  8. Save with File > Save or File > Save As.
Practical workflow: use WYSIWYG for speed, then return to HTML Edit for exact inspection and final cleanup.

Workspace Overview

The main window is organized around three tabs:

  • HTML Edit: direct editing in the Scintilla source editor.
  • WYSIWYG: visual editing in the embedded HTML editor.
  • Preview: rendered output for checking appearance.

Most formatting buttons exist in both HTML Edit and WYSIWYG forms. The source-side buttons insert or remove HTML directly. The WYSIWYG-side buttons work against the current visual selection and then sync back to source when you change tabs.

Files and Saving

Create a new document

Use File > New to start a new HTML document shell.

Open an existing document

Use File > Open to load an existing HTML file.

Save

Use File > Save to save the current file and File > Save As when you want to create a new copy.

If you are actively editing in the WYSIWYG tab, switch tabs or save through the normal file workflow so the visual content is synchronized back into the HTML source.

HTML Source Editor

The HTML Edit tab uses a Scintilla-based editor with syntax coloring, selection-based formatting tools, and source cleanup commands.

Editor font size

Use the Editor Font Size menu command to change the source editor font size. The chosen size is remembered between launches.

Standard editing commands

The source editor supports clear, copy, cut, paste, select all, undo, and find from the application menus.

Working style

Source-side formatting buttons in the HTML Tools area usually work on the current selection. If there is no selection, some commands insert tags at the caret, while others try to remove the nearest matching wrapper around the caret.

WYSIWYG Editor

The WYSIWYG tab is intended for fast visual editing. It is useful for common text formatting, links, lists, layout blocks, and quick content assembly.

How WYSIWYG changes behave

  • Text formatting is applied to the current visual selection.
  • Many buttons act as toggles. Pressing the same command again removes it.
  • When you leave the WYSIWYG tab, the current visual HTML is synchronized back to the source tab.
WYSIWYG editing is convenient, but it may normalize or restructure markup. If exact tag placement matters, confirm the result in the HTML Edit tab.

Formatting Tools

The editor provides matching formatting controls in both source and WYSIWYG modes.

Text emphasis

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Superscript
  • Subscript

These commands are designed as toggles. Applying the same command again removes it.

Paragraphs, headings, and wrappers

  • Heading popup: choose H1 through H6, or None to remove heading formatting.
  • P: wraps or unwraps a paragraph block.
  • DIV: wraps or unwraps a div container.
  • SPAN: wraps or unwraps a span container.
  • SEC: inserts or removes a section wrapper.
  • BLOCKQUOTE: inserts or removes a blockquote wrapper.

Font controls

  • Font Family popup: choose a family or None to remove font-family formatting.
  • Size popup: choose a size or None to remove font-size formatting.
  • Color: applies a text color; pressing it again on colored text removes that color formatting.

Alignment

  • Align Left
  • Align Center
  • Align Right
  • Align Justify

These commands behave as toggles. Reapplying the current alignment removes that same alignment. Choosing a different alignment switches to the new setting.

Insertions and Structures

Lists

The list dialog lets you choose:

  • Unordered List (Bulleted)
  • Ordered List (Number)
  • Remove List

Use Remove List to unwrap the current list structure when your caret or selection is in a list.

Line and rule elements

  • BR: inserts or removes a line break.
  • HR: inserts or removes a horizontal rule.

Links and media

  • Link: insert, edit, or remove hyperlinks.
  • Img: insert or edit images and optional link wrappers.
  • Video: insert generated video HTML.

Tables, forms, and cards

  • Table: prompts for rows and columns, then inserts table markup.
  • Form: inserts generated form HTML.
  • Card: opens the card dialog for reusable card blocks.

Background tools

  • BG Color
  • BG Img or BG IMG, depending on the toolbar
  • BG Clear / BG Cear, depending on the toolbar text currently shown

These commands update the page body background settings. Use them when styling the page shell, not just an individual text selection.

Preview and Synchronization

The Preview tab renders the current document so you can verify layout, typography, spacing, and media behavior.

Sync behavior

  • Switching away from WYSIWYG pushes the visual HTML back into source.
  • The Preview tab refreshes from the current source content.
  • The Sync command can be used to push content across all tabs manually.
If preview does not match what you expect, confirm which tab has the current truth and use Sync All Tabs before evaluating the result.

Cleanup and Formatting Commands

KCG HTML Editor includes source-side cleanup tools for keeping code readable and more consistent.

  • Tidy HTML
  • Beautify CSS
  • Beautify JavaScript
  • Tidy All
  • Indent HTML
  • Outdent HTML
  • HTML5 conversion and normalization commands

These are source-oriented tools. Use them after larger edits, pasted code, or WYSIWYG restructuring.

Command Reference

Use this section as a quick lookup for the most visible controls in the editor.

Text formatting

Bold, Italic, Underline, Strikethrough

Toggle inline emphasis on or off for the current selection.

Superscript, Subscript

Toggle superscript or subscript formatting for the selected text.

Color

Apply text color. Reapplying it on colored text removes the color formatting.

Font Family, Size

Apply font-family or font-size. Choose None to remove the corresponding style.

Structure and block tools

Heading

Apply H1 through H6, or choose None to remove heading markup.

P, DIV, SPAN, SEC, BLOCKQUOTE

Wrap or unwrap the selection with the matching HTML element.

List

Open the list dialog and choose unordered, ordered, or Remove List.

Align Left, Align Center, Align Right, Align Justify

Apply or remove block alignment formatting.

Insertion tools

Link

Create, edit, or remove hyperlinks.

Img

Insert or edit images and optional linked-image markup.

Table

Insert generated table markup after choosing row and column counts.

Form

Insert a generated form structure.

Video

Insert generated video HTML.

Card

Insert a reusable card-style content block.

BR

Insert or remove a line break.

HR

Insert or remove a horizontal rule.

Page-level tools

BG Color

Set the page background color.

BG Img / BG IMG

Set a page background image and related options.

BG Clear / BG Cear

Remove page background styling.

Sync All

Synchronize content across source, WYSIWYG, and preview.

Menu commands

Editor Font Size

Change the source editor display size. The chosen value persists between launches.

Tidy HTML, Beautify CSS, Beautify JavaScript

Clean and normalize source code for readability.

Tidy All

Run broader cleanup against the current document.

Indent HTML, Outdent HTML

Adjust indentation in source where appropriate.

Printing and Export

The application includes source and output export options depending on the active tab.

  • Print source
  • Export source as PDF
  • Export rendered output as PDF where available
  • Export a single-file result where supported

Some export and print commands are only enabled on the tabs where they make sense.

Practical Tips

Use source for exact cleanup

After heavy WYSIWYG editing, switch back to HTML Edit and inspect the markup.

Use WYSIWYG for speed

For quick text formatting, alignment, and simple layout blocks, WYSIWYG is faster.

Prefer selection for wrappers

Commands like paragraph, div, section, and blockquote are most predictable with an active selection.

Check preview often

Preview catches layout problems early, especially after inserting tables, cards, forms, or media.

Troubleshooting

A formatting button did not remove existing markup

Try again with the caret inside the formatted content or with the full intended content selected. Some toggle operations are context-sensitive.

Preview does not match the WYSIWYG tab

Use Sync All or leave the WYSIWYG tab so its content is pushed back into source before preview refreshes.

Code looks messy after visual editing

Run the HTML cleanup or beautify commands in the source tab.

A list, section, or block wrapper removed more than expected

Undo immediately, then retry with a more precise selection or from the source editor.

The source editor text is too small or too large

Use the Editor Font Size command. The current editor size is stored and restored the next time you launch the program.

KCG HTML Editor user documentation. Update this guide whenever major editing commands, dialogs, or synchronization behavior change.